/** API文档 HTML模板 */

export const HTML_TEMPLATE: string = `
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>API文档</title>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/atom-one-dark.min.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>

  <div id="app" class="p-10 flex flex-col gap-2">

    <h1 class="text-4xl font-bold">API文档</h1>

    <div class="mt-8">
      <div class="py-2 text-2xl font-bold">API使用以及入口参数</div>
      <div>调用者统一使用 POST 向 http://localhost:${process.env.PORT}/${process.env.API_URL} 发送如下 JSON 格式</div>
      <pre>
        <code class="json">
{
  moduleName: string, // API方法
  params: Object, // 方法参数
}
        </code>
      </pre>
    </div>

    <div>
      <div class="py-2 text-2xl font-bold">资源列表</div>
      <div class="flex flex-row gap-2">
        <div class="w-[30%] flex-shrink-0 h-80 overscroll-scroll overflow-y-auto overscroll-contain border rounded">
          <div v-for="item in resourceList" class="p-2 text-center hover:bg-gray-400 hover:text-white hover:rounded" :class="selectRes.name === item.name ? 'bg-gray-800 text-white rounded' : 'bg-white text-gray-600'"
            @click="handleClickChangeSelectResource(item)">
            <div class="w-full cursor-pointer">{{ item.name }}</div>
          </div>
        </div>
        <div
          class="grow p-2 bg-gray-800 text-gray-200 rounded overscroll-scroll overflow-y-auto overscroll-contain flex flex-col gap-1">
          <div class="text-xl font-bold">{{selectRes.name}}</div>
          <div class="">允许动作：{{ selectRes.actions }}</div>
          <div class="mt-2">{{selectRes.desc}}</div>
        </div>
      </div>
    </div>

    <div>
      <div class="py-2 flex flex-row items-center justify-between">
        <div class="inline-flex items-center gap-2">
          <button class="p-2 text-2xl font-bold rounded border " :class="selectCode===0?'border-indigo-500 text-indigo-500':'bg-gray-100 text-gra-400'" @click="handleClickChangeSelectCode(0)">API接口定义代码</button>
          <button class="p-2 text-2xl font-bold rounded border " :class="selectCode===1?'border-indigo-500 text-indigo-500':'bg-gray-100 text-gra-400'" @click="handleClickChangeSelectCode(1)">数据类型定义代码</button>
          <button class="p-2 text-2xl font-bold rounded border " :class="selectCode===2?'border-indigo-500 text-indigo-500':'bg-gray-100 text-gra-400'" @click="handleClickChangeSelectCode(2)">参数验证器代码</button>
        </div>
        <div class="inline-flex items-center gap-2">
          <button class="px-2 py-1 rounded-lg border bg-indigo-500 text-white hover:bg-indigo-700"
            @click="handleClickCopyCode">复制代码</button>
          <button class="px-2 py-1 rounded-lg border bg-indigo-500 text-white hover:bg-indigo-700"
            @click="handleDownloadCode">生成代码文件下载</button>
        </div>
      </div>
      <div class="text-gray-400"> 调用者复制代码即可直接使用</div>
      
      <div>
        <pre>
          <code class="typescript">
            {{ sourceCode[selectCode] }}
          </code>
        </pre>
      </div>

      <div class="inline-flex items-center gap-2">
        <button class="px-2 py-1 rounded-lg border bg-indigo-500 text-white hover:bg-indigo-700"
          @click="handleClickCopyCode">复制代码</button>
        <button class="px-2 py-1 rounded-lg border bg-indigo-500 text-white hover:bg-indigo-700"
          @click="handleDownloadCode">生成代码文件下载</button>
      </div>

    </div>

  </div>


  <script>

    const { createApp, ref, watch, nextTick } = Vue

    createApp({
      setup() {

        const sourceCode = ref([
          \`$API_STRING\`,
          \`$INTERFACE_STRING\`,
          \`$VALIDATOR_STRING\`
        ])

        const resourceList = ref([$RESOURCE_LIST])
        const selectRes = ref(resourceList.value.length > 0 ? resourceList.value[0] : {})
        const selectCode = ref(0)

        const handleClickChangeSelectResource = (item) => {
          selectRes.value = item
        }

        const handleClickChangeSelectCode = (mode) =>{
          selectCode.value = mode
        }

        watch(selectCode, () => {
          nextTick(() => {
            document.querySelectorAll('pre code').forEach((el) => {
              hljs.highlightElement(el)
            })
            // console.log(sourceCode.value[selectCode.value])
          })
        })

        const handleClickCopyCode = async () => {
          await navigator.clipboard.writeText(sourceCode.value[selectCode.value])
          window.alert('代码已复制到粘贴板')
        }

        const handleDownloadCode = () =>{
          const blob = new Blob([sourceCode.value[selectCode.value]], { type: 'text/plain;charset=utf-8' });
          const url = URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = url;
          link.download = ['CONST_API.ts','model.d.ts','validator.ts'][selectCode.value]
          link.click();
          URL.revokeObjectURL(url);
        }

        return {
          sourceCode,
          resourceList,
          selectRes,
          selectCode,
          handleClickChangeSelectResource,
          handleClickChangeSelectCode,
          handleClickCopyCode,
          handleDownloadCode,
        }
      }
    }).mount('#app')

    hljs.highlightAll()

  </script>

</body>

</html>
`